<!--
 * @FileDescription TTS
 * @Author 杨宇翔
 * @Date 20220729 13:41:24
 * @LastEditors 杨宇翔
 * @LastEditTime 20220729 13:41:24
-->
<template>
    <audio ref="audio" controls @canplay="OnCanPlayAsync">
        <slot></slot>
    </audio>
</template>

<script setup lang="ts">
import TTSComponent from '@runtime/module/TTS/TTSComponent';
import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';

const audio: Ref<HTMLAudioElement | null> = ref(null);

async function OnContentChangedAsync(): Promise<void> {
    audio.value!.src = await TTSComponent.Default.ParseAsync(audio.value!.innerHTML);
}

async function OnCanPlayAsync(): Promise<void> {
    await audio.value?.play();
}

onMounted(async () => {
    audio.value!.addEventListener('DOMSubtreeModified', OnContentChangedAsync);
    audio.value!.src = await TTSComponent.Default.ParseAsync(audio.value!.innerHTML);
});

onBeforeUnmount(() => {
    audio.value?.pause();
    audio.value!.src = '';
});
</script>

<style scoped>
</style>